<template>
	<view class="dot"  
		:class="{
			active: value,
			disabled: disabled
		}"
		:style="{
			width: size + 'rpx',
			height: size + 'rpx'
		}"
	 @click.stop="change">
		<u-icon v-if="!disabled" name="checkbox-mark" color="#fff" :size="`${size - 8}rpx`" bold top="3rpx"></u-icon>
	</view>
</template>

<script>
	export default {
		name:"custom-checkbox",
		props: {
			value: {
				type: Boolean,
				require: true
			},
			size: {
				type: Number,
				default: 36
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			change(){
				if(this.disabled) return;
				this.$emit('input', !this.value);
			}
		}
	}
</script>

<style lang="scss" scoped>
.dot{
	@include flex-center;
	border-radius: 50%;
	margin-right: 15rpx;
	border: 2rpx solid #595959;
	&.active{
		background-color: $primary;
		border: 0;
	}
	&.disabled{
		background-color: #cecece;
		border: 2rpx solid #acacac;
	}
}
</style>